<template>
  <!-- 精灵是一个总是面朝着摄像机的平面，通常含有使用一个半透明的纹理。
        精灵不会投射任何阴影，即使设置了
        castShadow = true也将不会有任何效果。 -->
  <div id="scene" @click="clickSprite"></div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

let scene; //场景
let camera; //相机
let renderer; //渲染器
let controls; //控制器
export default {
  name: "demo",
  data() {
    return {
      scaleValue: 1,
      isadd: false,
      pointList: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    //初始化
    init() {
      this.createScene();
      this.createSprite();
      this.createLight();
      this.createCamera();
      this.createRender();
      this.createControls();
      this.render();
    },
    //创建场景
    createScene() {
      scene = new THREE.Scene();
    },
    //创建精灵（Sprite）
    createSprite() {
      var spriteMap = new THREE.TextureLoader().load("/img/hot.png");
      var spriteMaterial = new THREE.SpriteMaterial({
        map: spriteMap,
        color: 0xffffff,
      });
      this.sprite = new THREE.Sprite(spriteMaterial);
      scene.add(this.sprite);
      this.sprite.userData.name = "testSprite1";
      this.pointList.push(this.sprite);

      const plane = new THREE.Mesh(
        new THREE.PlaneGeometry(5, 5),
        new THREE.MeshStandardMaterial({
          color: 0x70631b,
          metalness: 1,
          roughness: 0.5,
          side: THREE.DoubleSide,
        })
      );
      plane.rotateX(Math.PI / 2);
      plane.position.set(0, -1, 0);
      scene.add(plane);
    },
    //创建光源
    createLight() {
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.1); //创建环境光
      scene.add(ambientLight);

      const spotLight = new THREE.SpotLight(0xffffff); //创建聚光灯
      spotLight.position.set(0, 60, 10);
      scene.add(spotLight);
    },
    // 创建相机
    createCamera() {
      const element = document.getElementById("scene");
      const k = element.clientWidth / element.clientHeight; //窗口宽高比

      camera = new THREE.PerspectiveCamera(35, k, 0.1, 1000);
      camera.position.set(0, 5, 10);

      camera.lookAt(new THREE.Vector3(10, 0, 0)); //设置相机方向
      scene.add(camera);
    },
    //创建渲染器
    createRender() {
      const element = document.getElementById("scene");
      renderer = new THREE.WebGLRenderer();
      renderer.setSize(element.clientWidth, element.clientHeight); //设置渲染区域尺寸
      renderer.setClearColor(0x3f3f3f, 1); //设置背景颜色
      element.appendChild(renderer.domElement);
    },
    //缩小、放大精灵，产生动效
    scaleSprite() {
      this.scaleValue += this.isadd ? 0.01 : -0.01;
      this.sprite.scale.set(this.scaleValue, this.scaleValue, this.scaleValue);
      this.isadd =
        this.scaleValue < 0.5 || this.scaleValue > 1 ? !this.isadd : this.isadd;
    },
    render() {
      this.scaleSprite();
      renderer.render(scene, camera);
      requestAnimationFrame(this.render);
    },
    //创建控件对象
    createControls() {
      controls = new OrbitControls(camera, renderer.domElement);
    },
    clickSprite(event) {
      event.preventDefault();

      var raycaster = new THREE.Raycaster();
      var mouse = new THREE.Vector2();

      const element = document.getElementById("scene");
      mouse.x = ((event.clientX - 200) / element.clientWidth) * 2 - 1;
      mouse.y = -(event.clientY / element.clientHeight) * 2 + 1;

      raycaster.setFromCamera(mouse, camera);

      var intersects = raycaster.intersectObjects(this.pointList);
      if (intersects.length > 0) {
        console.log("选中object的userData:", intersects[0].object.userData);
      }
    },
  },
};
</script> 

<style scoped>
#scene {
  width: 100%;
  height: 100%;
}
</style>
